<template>
	<a-card :bordered="false" style="height: 100%">
		<div class="j-table-operator" style="width: 100%">
	<!-- 		<a-button type="primary" preIcon="ant-design:plus-outlined" @click="onAddDepart">新增</a-button>
			<a-button type="primary" preIcon="ant-design:plus-outlined" @click="onAddChildDepart()">新增出发日期</a-button> -->
			<a-button type="primary" preIcon="ant-design:search-outlined" @click="selectJouneryByStats(0)">看所有</a-button>
			<a-button type="primary" preIcon="ant-design:search-outlined" @click="selectJouneryByStats(1)">待出行</a-button>
			<a-button type="primary" preIcon="ant-design:search-outlined" @click="selectJouneryByStats(4)">出行中</a-button>
			<a-button type="primary" preIcon="ant-design:search-outlined" @click="selectJouneryByStats(6)">已下架</a-button>
			<a-button type="primary" preIcon="ant-design:search-outlined" @click="selectJouneryByStats(8)">报名中</a-button>
			<a-button type="primary" preIcon="ant-design:search-outlined" @click="selectJouneryByStats(3)" v-if="gid!=0">有报名</a-button>
			<a-button type="primary" preIcon="ant-design:search-outlined" @click="selectJouneryByStats(2)">已结束</a-button>
			<a-button type="primary" preIcon="ant-design:search-outlined" @click="selectJouneryByStats(7)">已成团</a-button>
			<!-- <a-upload name="file" :showUploadList="false" :customRequest="onImportXls">
        <a-button type="primary" preIcon="ant-design:import-outlined">导入</a-button>
      </a-upload>
      <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls">导出</a-button> -->
			<!--     <a-button type="primary" preIcon="ant-design:sync-outlined">同步企微?</a-button>
      <a-button type="primary" preIcon="ant-design:sync-outlined">同步钉钉?</a-button> -->
			<!-- 	<template v-if="checkedKeys.length > 0">
				<a-dropdown>
					<template #overlay>
						<a-menu>
							<a-menu-item key="1" @click="onDeleteBatch">
								<icon icon="ant-design:close-outlined" />
								<span>关闭行程</span>
							</a-menu-item>
						</a-menu>
					</template>
					<a-button>
						<span>批量操作 </span>
						<icon icon="akar-icons:chevron-down" />
					</a-button>
				</a-dropdown>
			</template> -->
		</div>
		<!-- 		<a-alert type="info" show-icon class="alert" style="margin-bottom: 8px">
			<template #message>
				<template v-if="checkedKeys.length > 0">
					<span>已选中 {{ checkedKeys.length }} 条记录</span>
					<a-divider type="vertical" />
					<a @click="checkedKeys = []">清空</a>
				</template>
				<template v-else>
					<span>未选中任何数据</span>
				</template>
			</template>
		</a-alert> -->
		<a-spin :spinning="loading">
			<!-- <a-input-search placeholder="按部门名称搜索…" style="margin-bottom: 10px" @search="onSearch" /> -->
			<!--组织机构树-->
			<template v-if="treeData.length > 0">
				<a-tree v-if="!treeReloading" checkable :clickRowToExpand="false" :treeData="treeData"
					:selectedKeys="selectedKeys" :checkStrictly="checkStrictly" :load-data="loadChildrenTreeData"
					:checkedKeys="checkedKeys" v-model:expandedKeys="expandedKeys" @check="onCheck" @select="onSelect">
					<template #title="{ key: treeKey, title, dataRef }">
						<a-dropdown :trigger="['contextmenu']">
							<Popconfirm :visible="visibleTreeKey === treeKey" title="确定要删除吗？" ok-text="确定"
								cancel-text="取消" placement="rightTop" @confirm="onDelete(dataRef)"
								@visibleChange="onVisibleChange">
								<span>{{ title }}</span>
							</Popconfirm>

							<template #overlay>
								<a-menu @click=""><!-- @click="onAddChildDepart(dataRef)" -->
									<!-- <a-menu-item key="1" @click="closeApplyByMainId(dataRef)" v-if="dataRef.orgType==2">下架</a-menu-item>
									<a-menu-item key="1" @click="closeApplyByMainId(dataRef)" v-if="dataRef.orgType==2">上架</a-menu-item>
									 -->
									 <a-menu-item key="1" @click="updateStatsById(dataRef)" v-if="dataRef.orgType==2">修改状态</a-menu-item>
									<a-menu-item key="1" @click="openUploadQrImgModal(dataRef)"
										v-if="dataRef.orgType==2">群二维码</a-menu-item>
									<!-- <a-menu-item key="2" @click="visibleTreeKey = treeKey">
										<span style="color: red">删除</span>
									</a-menu-item> -->
								</a-menu>
							</template>
						</a-dropdown>
					</template>
				</a-tree>
			</template>
			<a-empty v-else description="暂无数据" />
		</a-spin>
		<DepartFormModal :rootTreeData="treeData" @register="registerModal" @success="loadRootTreeData" />
		<uploadImgModal @register="registerUploadImgModal" @successConfirm="uploadImgModalFun" />
		<uploadStatsModal @register="registerUploadStatsModal" @successConfirm="uploadStatsModalFun" />



	</a-card>
</template>

<script lang="ts" setup>
	import { inject, nextTick, ref, unref } from 'vue';
	import { useModal } from '/@/components/Modal';
	import { useMessage } from '/@/hooks/web/useMessage';
	import { useMethods } from '/@/hooks/system/useMethods';
	import { Api, deleteBatchDepart, queryDepartTreeSync, getTravelGroupByWhile } from '../depart.api';
	import { searchByKeywords } from '/@/views/system/departUser/depart.user.api';
	import DepartFormModal from '/@/views/system/depart/components/DepartFormModal.vue';
	import uploadImgModal from '../../modal/uploadQrImgModal.vue';
	import uploadStatsModal from '../../modal/uploadStatsModal.vue';
	import { Popconfirm } from 'ant-design-vue';
	import { defHttp } from '/@/utils/http/axios';
	const { createConfirm } = useMessage();

	const prefixCls = inject('prefixCls');
	const emit = defineEmits(['select', 'rootTreeData','searchByType']);
	const { createMessage } = useMessage();
	const { handleImportXls, handleExportXls } = useMethods();

	const loading = ref<boolean>(false);
	// 部门树列表数据
	const treeData = ref<any[]>([]);
	const gid = ref("0")
	// 当前选中的项
	const checkedKeys = ref<any[]>([]);
	// 当前展开的项
	const expandedKeys = ref<any[]>([]);
	// 当前选中的项
	const selectedKeys = ref<any[]>([]);
	// 树组件重新加载
	const treeReloading = ref<boolean>(false);
	// 树父子是否关联
	const checkStrictly = ref<boolean>(true);
	// 当前选中的部门
	const currentDepart = ref<any>(null);
	// 控制确认删除提示框是否显示
	const visibleTreeKey = ref<any>(null);
	// 搜索关键字
	const searchKeyword = ref('');

	// 注册 modal
	const [registerModal, { openModal }] = useModal();
	const [registerUploadImgModal, { openModal: openUploadQrImg }] = useModal();
	const [registerUploadStatsModal, { openModal: openUpdateStatsModal }] = useModal();


	function openUploadQrImgModal(e) {
		openUploadQrImg(true, {
			e,
			isUpdate: false,
			showFooter: true
		})
	}
	function uploadImgModalFun() {

	}
	function uploadStatsModalFun() {
	
	}

	// 加载顶级部门信息
	async function loadRootTreeData(type) {
		if(!type){
			type=0;
		}
		if(type==0){
			gid.value='0'
		}
		try {
			loading.value = true;
			treeData.value = [];
			//  const result = await queryDepartTreeSync();
			const result = await getTravelGroupByWhile({ type: type, gId: gid.value });
			if (Array.isArray(result)) {
				treeData.value = result;
			}
			if (expandedKeys.value.length === 0) {
				autoExpandParentNode();
			} else {
				if (selectedKeys.value.length === 0) {
					let item = treeData.value[0];
					if (item) {
						// 默认选中第一个
						setSelectedKey(item.id, item);
					}
				} else {
					emit('select', currentDepart.value);
				}
			}
			emit('rootTreeData', treeData.value);
		} finally {
			loading.value = false;
		}
	}

	loadRootTreeData(0);
  
	// 加载子级部门信息
	async function loadChildrenTreeData(treeNode) {
		gid.value=treeNode.dataRef.id
		try {
			/* const result = await queryDepartTreeSync({
				pid: treeNode.dataRef.id,
			}); */
			const result = await getTravelGroupByWhile({
				gId:gid.value,
				type: 0
			});
			if (result.length == 0) {
				treeNode.dataRef.isLeaf = true;
			} else {
				treeNode.dataRef.children = result;
				if (expandedKeys.value.length > 0) {
					// 判断获取的子级是否有当前展开的项
					let subKeys : any[] = [];
					for (let key of expandedKeys.value) {
						if (result.findIndex((item) => item.id === key) !== -1) {
							subKeys.push(key);
						}
					}
					if (subKeys.length > 0) {
						expandedKeys.value = [...expandedKeys.value];
					}
				}
			}
			treeData.value = [...treeData.value];
			emit('rootTreeData', treeData.value);
		} catch (e) {
			console.error(e);
		}
		return Promise.resolve();
	}
	
	function updateStatsById(data){
		data.isOrder=0
		//打开modal  选择状态--修改
		openUpdateStatsModal(true,{
			data,
			showFooter:true
		});
		
	}
	
	function selectJouneryByStats(i){
		console.log(i)
		if(i==0){
			
		}
		loadRootTreeData(i)
	}

	// 自动展开父节点，只展开一级
	function autoExpandParentNode() {
		let item = treeData.value[0];
		if (item) {
			if (!item.isLeaf) {
				expandedKeys.value = [item.key];
			}
			// 默认选中第一个
			setSelectedKey(item.id, item);
			reloadTree();
		} else {
			emit('select', null);
		}
	}

	// 重新加载树组件，防止无法默认展开数据
	async function reloadTree() {
		await nextTick();
		treeReloading.value = true;
		await nextTick();
		treeReloading.value = false;
	}

	/**
	 * 设置当前选中的行
	 */
	function setSelectedKey(key : string, data ?: object) {
		selectedKeys.value = [key];
		if (data) {
			currentDepart.value = data;
			emit('select', data);
		}
	}

	// 添加一级部门
	function onAddDepart() {
		openModal(true, { isUpdate: false, isChild: false });
	}

	// 添加子级部门
	function onAddChildDepart(data = currentDepart.value,type) {
		console.log(data,250,type)
		if (data == null) {
			createMessage.warning('请先选择一个部门');
			return;
		}
		const record = { parentId: data.id };
		openModal(true, { isUpdate: false, isChild: true, record });
	}

	function closeApplyByMainId(data = currentDepart.value) {
		console.log(data)
		//1:上架主行程(截止报名时间为出发时间前12个小时)，2.下架主行程（截止报名时间为现在），3. 上架所有，4.下架所有
		
		let type=1;
		if(data.orgType==1){
			
		}else{
			type=2;
		}

		let params = {
			id: data.id,
			type: 1
		}

		createConfirm({
			iconType: 'warning',
			title: '关闭该行程报名',
			content: '是否确认关闭该行程报名',
			okText: '确认',
			cancelText: '取消',
			onOk: () => {
				return defHttp.post({ url: Api.editCloseOrOpen, data: params }, { joinParamsToUrl: true }).then(() => {
					handleSuccess();
				});
			}
		});
	}


	// 搜索事件
	async function onSearch(value : string) {
		if (value) {
			try {
				loading.value = true;
				treeData.value = [];
				let result = await searchByKeywords({ keyWord: value });
				if (Array.isArray(result)) {
					treeData.value = result;
				}
				autoExpandParentNode();
			} finally {
				loading.value = false;
			}
		} else {
			loadRootTreeData();
		}
		searchKeyword.value = value;
	}

	// 树复选框选择事件
	function onCheck(e) {
		console.log('----->264', e)
		if (Array.isArray(e)) {
			checkedKeys.value = e;
		} else {
			checkedKeys.value = e.checked;
		}
	}

	// 树选择事件
	function onSelect(selKeys, event) {
		console.log('select: 274', selKeys, event);

		if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) {
			setSelectedKey(selKeys[0], event.selectedNodes[0]);
		} else {
			// 这样可以防止用户取消选择
			setSelectedKey(selectedKeys.value[0]);
		}
	}

	/**
	 * 根据 ids 删除部门
	 * @param idListRef array
	 * @param confirm 是否显示确认提示框
	 */
	async function doDeleteDepart(idListRef, confirm = true) {
		const idList = unref(idListRef);
		if (idList.length > 0) {
			try {
				loading.value = true;
				await deleteBatchDepart({ ids: idList.join(',') }, confirm);
				await loadRootTreeData();
			} finally {
				loading.value = false;
			}
		}
	}

	// 删除单个部门
	async function onDelete(data) {
		if (data) {
			onVisibleChange(false);
			doDeleteDepart([data.id], false);
		}
	}

	// 批量删除部门
	async function onDeleteBatch() {
		try {
			await doDeleteDepart(checkedKeys);
			checkedKeys.value = [];
		} finally {
		}
	}

	function onVisibleChange(visible) {
		if (!visible) {
			visibleTreeKey.value = null;
		}
	}

	function onImportXls(d) {
		handleImportXls(d, Api.importExcelUrl, () => {
			loadRootTreeData();
		});
	}

	function onExportXls() {
		handleExportXls('部门信息', Api.exportXlsUrl);
	}

	defineExpose({
		loadRootTreeData,
	});
</script>